<template>
  <div id="box">
    <img src="https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg" />
    <h4 :style="{ backgroundColor: colStr }" @click="btn">这是一只憨批狗</h4>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colStr: "#fff",
    };
  },
  methods: {
    btn() {
      let r = Math.ceil(Math.random() * 255);
      let g = Math.ceil(Math.random() * 255);
      let b = Math.ceil(Math.random() * 255);
      console.log(r, g, b);
      this.colStr = `rgb(${r},${g},${b})`;
    },
  },
};
</script>

<style scoped>
img {
  width: 500px;
}
h4 {
  text-align: center;
}
#box {
  border: 1px solid #000;
  border: 1px solid rgb(47, 38, 38);
  width: 502px;
}
</style>